<template>
  <div>
    <router-view></router-view>
    <NavBar v-if="state.show"/>
  </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const state = reactive({
  menu: ['/home', '/data', '/setting'],
  show: false // 判断底部导航栏是否显式
})



// 是否显式底部导航栏，取决于当前路由是否在菜单中，路由守卫
const router = useRouter()
router.beforeEach((to, from, next) => {
  state.show = state.menu.includes(to.path)// to可以获取跳转到的那个路由路径
  next()// 这个在beforeEach中一定要调用，意思是放行，允许跳过去
})
</script>

<style lang="less" scoped>

</style>